<template>
  <div>
    <el-form-item label="附加费用">
      <el-table :data="form.orderCancelRule" size="mini">
        <el-table-column min-width="180">
          <template slot="header" slot-scope="scope">
            <el-button size="mini" type="primary" @click="addCancelOrderRuleDialogVisible=true;">新增附加费用</el-button>
          </template>
          <template slot-scope="{row}">
            <span>乘车时间在</span>
            <el-time-picker
              v-if="row.edit"
              v-model="row.time"
              size="mini"
              placeholder="选择时间"
              value-format="HH:mm"
              style="width: 110px;"/>
            <el-tag v-else type="warning" size="mini" disable-transitions>{{ row.time }}</el-tag>
            <span>到</span>
            <el-time-picker
              v-if="row.edit"
              v-model="row.time"
              size="mini"
              placeholder="选择时间"
              value-format="HH:mm"
              style="width: 110px;"/>
            <el-tag v-else type="warning" size="mini" disable-transitions>{{ row.time }}</el-tag>
            <span>时间段内，按票价的</span>
            <el-input v-if="row.edit" v-model="row.percentage" class="edit-input" size="mini" style="width: 54px;"/>
            <el-tag v-else type="warning" size="mini" disable-transitions>{{ row.percentage }}%</el-tag>
            <span>收取服务费；</span>
          </template>
        </el-table-column>
        <el-table-column align="center">
          <template slot-scope="{$index, row}">
            <slot v-if="row.edit">
              <el-button type="success" size="mini" icon="el-icon-check" circle
                         @click="confirmEditCancelOrderRule(row)"/>
              <el-button type="danger" size="mini" icon="el-icon-close" circle
                         @click="cancelEditCancelOrderRule(row)"/>
            </slot>
            <slot v-else>
              <el-button size="mini" type="primary" @click="row.edit=!row.edit">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteCancelOrderRule($index, row)">删除</el-button>
            </slot>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <!--新增附加费用弹窗-->
    <el-dialog :visible.sync="addCancelOrderRuleDialogVisible" title="新增附加费用" center width="700px">
      <span>乘车时间在</span>
      <el-time-picker
        v-model="cancelOrderRuleDialogForm.time"
        placeholder="选择时间"
        value-format="HH:mm"
        style="width: 120px;"/>
      <span>到</span>
      <el-time-picker
        v-model="cancelOrderRuleDialogForm.time"
        placeholder="选择时间"
        value-format="HH:mm"
        style="width: 120px;"/>
      <span>时间段内，按票价的</span>
      <el-input v-model="cancelOrderRuleDialogForm.percentage" style="width: 70px;"/>
      <span>收取服务费；</span>
      <div slot="footer">
        <el-button @click="cancelAddCancelOrderRule">取 消</el-button>
        <el-button type="primary" @click="addCancelOrderRule">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: {},
    data() {
      return {
        form: {
          // 规则列表
          orderCancelRule: []
        },
        // 取消订单规则相关
        addCancelOrderRuleDialogVisible: false,
        cancelOrderRuleDialogForm: {}
      }
    },
    mounted() {
      this.loadData();
    },
    methods: {
      // 加载信息
      loadData(){
        (async () => {
          this.loading = true;
          const result = await this.$service.applicationGetCancelRule();
          this.loading = false;
          if (result.code === 0) {
            Object.assign(this.form, result.data || {})
            this.form.orderCancelRule = this.form.orderCancelRule.map(v => {
              this.$set(v, 'edit', false);
              v.originalName = v.name;
              return v;
            })
          }
        })();
      },
      // 增加一条取消规则
      addCancelOrderRule() {
        this.form.orderCancelRule.push(this.cancelOrderRuleDialogForm);
        this.cancelOrderRuleDialogForm = {};
        this.addCancelOrderRuleDialogVisible = false;
        this.$emit('change', this.form.orderCancelRule);
      },
      // 取消增加一条取消规则
      cancelAddCancelOrderRule() {
        this.addCancelOrderRuleDialogVisible = false;
      },
      // 确定修改取消规则
      confirmEditCancelOrderRule(row) {
        row.edit = false;
        row.originalTitle = row.title;
        this.$emit('change', this.form.orderCancelRule);
      },
      // 取消修改取消规则
      cancelEditCancelOrderRule(row) {
        row.edit = false;
        row.name = row.originalName;
      },
      // 删除一条取消规则
      deleteCancelOrderRule(index) {
        this.form.orderCancelRule.splice(index, 1);
        this.$emit('change', this.form.orderCancelRule);
      }
    }
  }
</script>
